#signup_page > h1{
    font-size: 45px;
    font-weight: 500;
    letter-spacing: 4px;
    margin: 60px 0;
    color: #FFFFFF;
}


.signup_container{
    width: 38%;
    height: auto;
    position: relative;
    left: 0;right: 0;
    top: 105px;
    margin:auto;
    padding: 40px;
    background-color:rgba(10,10,10,0.77);
    border:2px ridge rgba(238,238,238,0.13);
    border-radius: 5px;
    /*rgba兼容处理*/
    -moz-box-shadow: 0 -5px 10px 1px rgba(16,16,16,0.57);
    -webkit-box-shadow: 0 -5px 10px 1px rgba(16,16,16,0.57);
    box-shadow: 0 -5px 10px 1px rgba(16,16,16,0.57);
    border-bottom: none;
    border-bottom-left-radius:initial;
    border-bottom-right-radius: initial;
}

::-webkit-input-placeholder{/* WebKit browsers */
    color: #CCCCCC;
}

:-moz-placeholder{/* Mozilla Firefox 4 to 18 */
    color: #CCCCCC;
}

::-moz-placeholder{ /* Mozilla Firefox 19+ */
    color: #CCCCCC;
}

:-ms-input-placeholder{ /* Internet Explorer 10+ */
    color: #CCCCCC;
}

input[type='text'],#gender,#majorGroup{

    /*margin-bottom: 20px;*/
    padding: 10px;
    background-color: transparent;
    border:none;
    font-size: 15px;
    border-bottom: 1px solid rgba(238,238,238,0.41);
    outline: none;
    color:#FFFFFF;
}

input[type='text']{
    width: 90.4%;
}
#gender,#majorGroup{
    width: 94.4%;
}

.selectbg{
    background-color:rgba(10,10,10,0.77);
}

textarea{
    /*height: 150px;*/
    height: auto;
    width:88%;
    /*margin-bottom: 20px;*/
    padding: 10px;
    background-color: transparent;
    font-size: 15px;
    border-bottom: 1px solid rgba(238,238,238,0.41);
    color:#FFFFFF;
}

input[type="button"]{
    width: 60%;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 100;
    background-color: transparent;
    color: #CCC;
    border: 1px solid rgba(238, 238, 238, 0.41);
    border-width: thin;
    cursor: pointer;
    outline: none;
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    -o-transition:0.5s all;
    -ms-transition:0.5s all;
    text-decoration: none;
}

/*自适应设置*/
@media screen and (max-width: 1920px) {
    #signup_page > h1 {
        margin: 100px 0;
    }
    .signup_container{
        width: 38%;
    }
}

@media screen and (max-width: 1600px) {
    #signup_page > h1  {
        margin: 60px 0;
    }
}

@media screen and (max-width: 1440px) {
    .signup_container {
        width: 53%;
    }
}

@media screen and (max-width: 1366px) {
    #signup_page > h1  {
        margin: 50px 0;
    }
    .signup_container {
        width: 57%;
    }
    /*--w3layouts--*/
    /*--agileits--*/
}

@media screen and (max-width: 1280px) {
    .signup_container {
        width: 60%;
    }
}

@media screen and (max-width: 1024px) {
    .signup_container{
        width: 76%;
    }
}

@media screen and (max-width: 966px) {
    .signup_container{
        width: 80%;
    }
    .footer {
        margin: 50px 20px 20px;
    }
}

@media screen and (max-width: 853px) {
    .login {
        padding-right: 36px;
    }
    .register {
        padding-left: 36px;
    }
    .social-icons ul li {
        width: 32.8%;
    }
    .register p {
        font-size: 14px;
    }
}

@media screen and (max-width: 800px) {
    #signup_page > h1 {
        font-size: 43px;
    }
    .login {
        padding-right: 35px;
    }
    .register {
        padding-left: 34px;
    }
    .social-icons ul li span.icons {
        width: 28px;
    }
}

@media screen and (max-width: 768px) {
    .signup_container {
        width: 85%;
    }
    .register p {
        font-size: 13.8px;
    }
}

@media screen and (max-width: 736px) {
    #signup_page > h1 {
        font-size: 40px;
    }
    .signup_container {
        width: 87%;
        padding: 35px;
    }
    .login {
        padding-right: 34px;
    }
    .register {
        padding-left: 33px;
    }
    .social-icons ul li a span {
        font-size: 14px;
    }
    .register p {
        font-size: 13.2px;
    }
}

@media screen and (max-width: 667px) {
    #signup_page > h1 {
        font-size: 35px;
        letter-spacing: 3px;
    }
    .signup_container{
        width: 55%;
        padding: 50px;
    }
    .login {
        padding: 0;
        width: 100%;
        margin-bottom: 50px;
    }
    .register {
        padding: 40px 0 0 0;
        width: 100%;
        border: none;
        border-top: 1px solid #DDD;
    }
}

@media screen and (max-width: 603px) {
    #signup_page > h1{
        letter-spacing: 2px;
    }
}

@media screen and (max-width: 568px) {
    #signup_page > h1 {
        letter-spacing: 1px;
        margin: 30px 0;
    }
    .signup_container {
        width: 60%;
        padding: 40px;
    }
}

@media screen and (max-width: 533px) {
    #signup_page > h1  {
        font-size: 32px;
    }
}

@media screen and (max-width: 480px) {
    .signup_container{
        width: 70%;
        padding: 35px;
    }
    .send-button input[type="submit"] {
        width: 50%;
        padding: 8px 0;
    }
}

@media screen and (max-width: 414px) {
    #signup_page > h1  {
        font-size: 30px;
    }
    .container {
        width: 75%;
        padding: 25px;
    }
    .login {
        margin-bottom: 30px;
    }
    .signup_container > h2 {
        font-size: 30px;
        margin-bottom: 15px;
    }
    .register {
        padding: 30px 0 0 0;
    }
    .footer p {
        font-size: 14px;
    }
}

@media screen and (max-width: 384px) {
    #signup_page > h1   {
        letter-spacing: 0px;
    }
}

@media screen and (max-width: 375px) {
    .social-icons ul li span.icons {
        width: 27px;
    }
    .register p {
        font-size: 13px;
        line-height: 23px;
    }
}

@media screen and (max-width: 360px) {
     .signup_container {
        width: 80%;
        padding: 20px;
    }
}

@media screen and (max-width: 320px) {
    .social-icons ul li {
        width: 32.7%;
    }
    .social-icons ul li span.icons {
        width: 25px;
    }
    .social-icons ul li a span {
        font-size: 12.4px;
    }
}




p.gray{
    color:gray;
}
p.red{
    color:#f00;
}
.hide{
    display:none;
}
.show{
    display:block;
}
p{
    font-size: 5px;
    height: 10px;
}